import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import ListMenu from './ListMenu/ListMenu.jsx'
import ShopList from './ShopList/ShopList.jsx'
import "./Cate.less"
import { reqgetcate, reqgetgoods } from '../../http/api'

export default class Cate extends Component {
  constructor() {
    super()
    // 初始化数据
    this.state = {
      Listmenu: [],
      shoplist: [],
      n: 0
    }
  }
  async componentDidMount() {
    let resmenu = await reqgetcate()
    if (resmenu.data.code === 200) {
      this.setState({
        Listmenu: resmenu.data.list ? resmenu.data.list : []
      })
    }
  }
  // 修改n值
  async upDataN(n) {
    let resshop = await reqgetgoods({ fid: this.state.n })
    this.setState({
      n: n,
      shoplist:resshop.data.list?resshop.data.list:[]
    })
  }

  render() {
    let { Listmenu, shoplist,upDataN, n } = this.state
    return (
      <div className='cate'>
        <Header back title="分类"></Header>
        <div className='cate_list_menu'>
          {/* 左侧的菜单 */}
          <ListMenu
            Listmenu={Listmenu}
            n={n}
            upDataN={(n) => { this.upDataN(n) }}
          ></ListMenu>
        </div>
        <div className='cate_shop_list'>
          {/* 右侧的商品展示区 */}
          <ShopList shoplist={shoplist}></ShopList>
        </div>
      </div>
    )
  }
}
